<template>
  <div class="outer-wrapper">
    <div class="ele-wrapper" v-if="message.msg_type === 'file' && isImage(message.file)">
      <image-message-ele :file="message.file"></image-message-ele>
    </div>
    <div class="ele-wrapper" v-else-if="message.msg_type === 'file'">
      <file-message-ele :file="message.file" :file-name="message.content"></file-message-ele>
    </div>
    <div class="ele-wrapper" v-else-if="message.msg_type === 'position'">
      <position-message-ele :position="JSON.parse(message.content)"></position-message-ele>
    </div>
    <div class="ele-wrapper" v-else>
      <text-message-ele :text="message.content"></text-message-ele>
    </div>
  </div>
</template>

<script>
import TextMessageEle from "@/views/ChatView/MessageEle/TextMessageEle.vue";
import ImageMessageEle from "@/views/ChatView/MessageEle/ImageMessageEle.vue";
import FileMessageEle from "@/views/ChatView/MessageEle/FileMessageEle.vue";
import PositionMessageEle from "@/views/ChatView/MessageEle/PositionMessageEle.vue";

export default {
  name: "MessageEle",
  computed: {
    Json() {
      return Json
    }
  },
  components: {PositionMessageEle, FileMessageEle, ImageMessageEle, TextMessageEle},
  props: {
    message: {
      type: Object,
    },
    isSender: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    isImage(url) {
      return /(jpg|JPG|jpeg|JPEG|png|PNG)$/.test(url);
    }
  }
}
</script>

<style scoped>
.outer-wrapper {
  display: flex;
  width: fit-content;
}
.ele-wrapper {
  display: flex;
  width: fit-content;
}
</style>